<template>
  <div>
    <h2>{{ isActive }}</h2>
    <div :class="[isActive ? 'divStl' : 'divStl_2']" ref="myDiv">hello world</div>
    <el-button type="primary" @click="changeColor">修改DOM元素</el-button>

  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      isActive: true,
    }
  },
  methods: {
    changeColor() {
      /**
       * 修改 div 的样式可以通过class的三目运算，
       * 也可以用refs来设置div的style
       */

      // this.$refs.myDiv.className = "divStl_3"

      this.$nextTick(function () {
        this.isActive = !this.isActive
        this.msg = this.isActive
      })
    }
  }
}
</script>

<style scoped>
.divStl {
  width: 180px;
  height: 80px;
  line-height: 80px;
  background-color: blue;
}

.divStl_2 {
  width: 180px;
  height: 80px;
  line-height: 80px;
  background-color: red;
}

.divStl_3 {
  width: 180px;
  height: 80px;
  line-height: 80px;
  background-color: yellow;
}
</style>
